<template>
	<view class="page">
		<image style="width: 26rpx; height: 40rpx; padding: 80rpx 0 0 40rpx;"  src="../../static/icon-back-white.png" @tap="fanhui()"></image>
		<view class="yqm">
			<view class="yqm-title">
				您专属邀请码
			</view>
			<view class="yqm-content">
				{{code}}
			</view>
			<view class="copy" @tap="copy()">
				复制
			</view>
			<!-- <view class="face"> -->
				<!-- 面对面邀请 -->
			<!-- </view> -->
			<view class="fas" @tap="share()">
				发送邀请
			</view>
			<view class="text">
				多邀多得
			</view>
		</view>
		<!-- 我的邀请 -->
		<view class="my-invitation">
			<view class="my-title">
				我的邀请
			</view>
			<view class="my-main">
				<view class="my-content flex align-items justify-around">
					<view class="my-item">
						<view class="number">
							{{this.vipOrderRecords.totalNum || 0}}
						</view>
						<view class="my-text">
							邀请人数
						</view>
					</view>
					<view class="my-item">
						<view class="number">
							{{this.Rebate.totalActivateNum || 0}}
						</view>
						<view class="my-text">
							激活人数
						</view>
					</view>
					<view class="my-item">
						<view class="number">
							{{proint(this.Rebate.todayRebate)}}
						</view>
						<view class="my-text">
							今日返利
						</view>
					</view>
					<view class="my-item">
						<view class="number">
							{{proint(this.Rebate.totalRebate)}}
						</view>
						<view class="my-text">
							累计返利
						</view>
					</view>
				</view>
				<!-- <view class="leiji">
					累计邀请实盘用户数
					<text style="text-align: right;" >{{this.vipOrderRecords.totalNum || 0}}</text>
				</view> -->
			</view>
		</view>
		<!-- 规则 -->
		<view class="guize">
			<!-- 希望获得额外的邀请奖励吗？ -->
			<!-- <text style="color: #FFFFFF;">了解规则 >></text> -->
		</view>
		<!-- 邀请记录 -->
		<view class="record">
			<view class="r-title">
				邀请记录
			</view>
			<view class="record-content">
				<view class="scroll-title flex align-items justify-between">
					<view class="title-t">好友账号</view>
					<view class="title-t">邀请时间</view>
					<view class="title-t" style="text-align: right;">奖励USDT</view>
				</view>
				<scroll-view @scrolltolower="reachBottom" :scroll-y="true" class="scroll">
					<view class="scroll-item flex align-items justify-between" v-for="(item,index) in vipOrderRecords.list" :key="index">
						<view class="title-t">
							{{str(item.userName)}}
						</view>
						<view class="title-t">
							{{sub(item.createTime)}}
						</view>
						<view class="title-t" style="text-align: right;">
							{{proint(item.award)}}
						</view>
					</view>
					<hide v-if="vipOrderRecords.length==0"/>
				</scroll-view>
			</view>
		</view>
		<view style="font-size: 24rpx;text-align: center;margin-top: 40rpx;color: #FFFFFF;">
			诸葛量化拥有活动的一切解释权，虚假邀请行为会被取消奖励
		</view>
		<u-popup v-model="popup" mode="bottom" :border-radius="20" safe-area-inset-bottom>
		  <view class="popup">
		    <view class="title">选择海报</view>
		    <u-swiper
		      :list="list"
		      mode="none"
		      effect3d
		      :height="672"
		      :autoplay="false"
		      :circular="false"
		      :border-radius="10"
		      class="swiper"
		      :data-index="current + 1"
		      @change="current = $event"
		    >
		    </u-swiper>
		    <view class="option">
		      <view class="item" v-for="(item, index) in shares" :key="item" @tap="fnInvite(index)">
		        <view class="icon"></view>
		        <text class="name">{{ item }}</text>
		      </view>
		    </view>
		  </view>
		</u-popup>
		<canvas
		  class="canvas"
		  canvas-id="image"
		  :style="{ width: `${imageW}px`, height: `${imageH}px` }"
		></canvas>
		
	</view>
</template>

<script>
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	import qr from 'qr-image'
	export default {
		data() {
			return {
				vipOrderRecords:[],//直推列表
				// 分享海报
				popup:false,
				list: [{
					image:'https://zhugelianghua.oss-cn-beijing.aliyuncs.com/image/zhuge_fenxiang.png'
				}
				],
				current: 0,
				shares: ['保存到本地'],
				imageW: uni.upx2px(680),
				imageH: uni.upx2px(1200),
				code:uni.getStorageSync('Login').code,
				url:'',//注册链接
				Rebate:{},//返利数据
			}
		},
		computed:{
			sub(){
				return t=>{
					return t.substring(0,10)
				}
			},
			str(){
				return t=>{
					if(t.length<=6) return t
					let data=t.substring(0,3)+'***'+t.substring(t.length,t.length-3)
					return data
				}
			},
			proint(){
				return t=>{
					return this.util.decimal(t)
				}
			},
		},
		onLoad() {
			 this.url = 'http://www.zglh.site/register/#/?mark_code='+uni.getStorageSync('Login').code
			this.request('vip/getLowUserByPid').then(res=>{//获取邀请人数
				this.vipOrderRecords=res.data.data
			})
			this.request('vip/getRebate').then(res=>{//获取返利
				let data=res.data.data
				this.request('vip/getCommunityUser').then(res=>{
					this.Rebate=Object.assign(res.data.data,data)
				})
			})
			
		},
		methods: {
			copy(){
				  uniCopy({
					content: this.url,
					success: (res) => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none', 
							duration: 3000,
						})
					}
				  })
			},
			fanhui(){
				this.$Router.back(1)
			},
			//下拉
			reachBottom(){
			},
			
			//保存图片
			share(){
				this.popup=true
				// this.qrR()
			},
			async fnInvite(i) {
			  this.util.loading('加载中')
			  const image = await this.getImage(i)
			  // console.log(image)
			  if (i === 0) {
			    // #ifdef H5
			    this.downloadFile(this.markCode, image)
			    uni.hideLoading()
			    // #endif
			
			    // #ifndef H5
			    uni.saveImageToPhotosAlbum({
			      filePath: image,
			      success: () => {
			        this.util.toast('保存成功', 'success')
			      },
			      fail: () => {
			        this.util.toast('保存失败')
			      }
			    })
			    // #endif
			  }
			},
			getImage(i) {
				
			  return new Promise(resolve => {
			    // 邀请地址
			   
			    // 邀请二维码 base64
			    const qrcode =
			      'data:image/png;base64,' + uni.arrayBufferToBase64(qr.imageSync(this.url, { margin: 2 }))
			
			    const ctx = uni.createCanvasContext('image')
			// console.log(qrcode)
			    // 绘制背景图
			    ctx.drawImage(this.list[this.current].image, 0, 0, this.imageW, this.imageH)
			
			    // 右下角二维码
			    // 绘制二维码
			    ctx.drawImage(qrcode, uni.upx2px(470), uni.upx2px(840), uni.upx2px(150), uni.upx2px(150))
			
			    // 扫一扫注册下载文字
			    ctx.setFontSize(uni.upx2px(30))
			    ctx.setFillStyle('#FFFFFF')
			    ctx.fillText('我的邀请码：'+uni.getStorageSync('Login').code, uni.upx2px(40), uni.upx2px(930))
			    ctx.draw(false, () => {
			      uni.canvasToTempFilePath({
					  
			        canvasId: 'image',
			        complete: ({ tempFilePath }) => {
			          resolve(tempFilePath)
			        }
			      })
			    })
			  })
			},
			// base64转blob
			base64ToBlob(code) {
				let parts = code.split(';base64,');
				let contentType = parts[0].split(':')[1];
				let raw = window.atob(parts[1]);
				let rawLength = raw.length;
			
				let uInt8Array = new Uint8Array(rawLength);
			
				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i);
				}
				return new Blob([uInt8Array], {type: contentType});
			},
			// 下载
			downloadFile(fileName, content) {
				let aLink = document.createElement('a');
				let blob = this.base64ToBlob(content); // new Blob([content]);
				let evt = document.createEvent('HTMLEvents');
				evt.initEvent('click', true, true);// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
				aLink.download = fileName;
				aLink.href = URL.createObjectURL(blob);
				aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));// 兼容火狐
			},
		}
	}
</script>

<style lang="scss">
	.page{
		height: 2512rpx;
		background: url(../../static/invitation/invitation.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.yqm{
		text-align: center;
		padding-top: 560rpx;
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: bold;
		color: $light-color;
		.yqm-content{
			font-size: 40rpx;
			margin: 30rpx 0 90rpx 0;
		}
		.copy{
			width: 88rpx;
			height: 44rpx;
			margin: 0 auto;
			line-height: 43rpx;
			border: 1px solid $light-color;
			border-radius: 8rpx;
		}
		.face{
			width: 176rpx;
			height: 14rpx;
			margin: 10rpx auto 20rpx;
			line-height: 3rpx;
			border-radius: 8px;
		}
		.fas{
			width: 400rpx;
			height: 88rpx;
			background: $light-color;
			border-radius: 44rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			margin: 20rpx auto 20rpx;
			color: #fff;
		}
		.text{
			color: #FFFFFF;
		}
	}
	.my-invitation{
		text-align: center;
		padding-top: 83rpx;
		.my-title{
			color: #FFFFFF;
			text-align: center;
		}
		.my-main{
			width: 678rpx;
			height: 230rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 20rpx auto;
			color: $light-color;
			font-weight: bold;
			padding: 60rpx 0 40rpx;
			box-sizing: border-box;
			.my-item{
				.my-text{
					margin: 30rpx 0;
				}
			}
			.leiji{
				margin: 30rpx 20rpx 20rpx;
				text-align: left;
				display: flex;
				
				text{
					margin-left: auto;
				};
			}
		}
	}
	.guize{
		margin: 40rpx;
		color: #FFFFFF;
	}
	.record{
		.r-title{
			text-align: center;
			color: #FFFFFF;
			margin-bottom: 20rpx;
		}
	}
	.record-content{
		width: 678rpx;
		height: 512rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		color: $light-color;
		font-weight: bold;
	}
	.scroll {
		height: 422rpx;
		padding-top: 20rpx;
		font-size: 26rpx;
		.scroll-title{
			margin-bottom: 10rpx;
		}
		.scroll-item{
			line-height: 60rpx;
		}
		.title-t{
			font-weight: 600;
			// border: 1px solid red;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&:first-child{
				width: 36%;
			}
			&:nth-child(2){
				width: 30%;
			}
			&:last-child{
				width: 31%;
			}
		}
	}
	
	.popup {
	  padding: 30rpx;
	  color: #333;
	  .title {
	    font-size: 30rpx;
	    font-weight: bold;
	    margin-bottom: 30rpx;
	  }
	  /deep/ .swiper {
	    .uni-swiper-slides {
	      transform: translateX(98rpx);
	    }
	    .uni-swiper-slide-frame {
	      width: 378rpx !important;
	    }
	    @for $i from 1 through 20 {
	      &[data-index='#{$i}'] .u-swiper-item:nth-child(#{$i}) image {
	        border-color: $color-primary;
	        &::before {
	          background-color: rgba($color-black, 0);
	        }
	        &::after {
	          opacity: 1;
	        }
	      }
	    }
	    .u-swiper-item image {
	      position: relative;
	      box-sizing: border-box;
	      border-radius: 10rpx;
	      border: 2rpx solid $color-white;
	      transition: border-color 0.3s;
	      &::before {
	        content: '';
	        width: 100%;
	        height: 100%;
	        position: absolute;
	        top: 0;
	        left: 0;
	        background-color: rgba($color-black, 0.4);
	        transition: background-color 0.3s;
	      }
	      &::after {
	        content: '';
	        width: 40rpx;
	        height: 40rpx;
	        @include background;
	        background-color: $color-white;
	        background-image: url('~@/static/api-icon-radio-s.png');
	        position: absolute;
	        right: 20rpx;
	        bottom: 20rpx;
	        border-radius: 50%;
	        opacity: 0;
	        transition: opacity 0.3s;
	      }
	    }
	  }
	  .option {
	    @include flex;
		justify-content: center;
	    margin-top: 30rpx;
	    .item {
	      @include flex;
	      flex-direction: column;
	      width: 33.33%;
	      @for $i from 1 through 3 {
	        &:nth-child(#{$i}) .icon {
	          background-image: url('~@/static/news-share-#{$i}.png');
	        }
	      }
	      transition: opacity 0.1s;
	      &:active {
	        opacity: 0.5;
	      }
	    }
	    .icon {
	      width: 60rpx;
	      height: 60rpx;
	      margin-bottom: 20rpx;
	      @include background;
	    }
	    .name {
	      font-size: 24rpx;
	    }
	  }
	}
	.canvas {
	  position: absolute;
	  top: 0;
	  left: 0;
	  opacity: 0;
	  z-index: -1;
	}

</style>
